I have a problem with CSS. Generally, my site looked good in Firefox and
IE7, but then, I wanted to see how it looks in IE6 (which still has over
30% of the market) - the result wasn't that great, the page looked ugly.
So I made various changes, and now the page looks good in IE6 and IE7.
In Firefox however, a background image is not displayed when I add a
"float" element to CSS. Where is the problem?
An example code is here:
http://wpkg.org/cssproblem.html
Expected result: "left column" and "right" column" written on respective
parts of the image. The image is available here: http://wpkg.org/sub2_bg.png
Result: IE6, IE7 - OK
Firefox - image is not displayed
When "float:left;" is commented out in #left_column, the image is
displayed in Firefox (but then, the text in the columns is messed).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>sometitle</title>
<style type="text/css">
#wrapper {
clear: both;
width:100%;
background-image: url(sub2_bg.png);
background-repeat: repeat-y;
}
#left_column {
width:607px;
float:left;
}
#right_column {
width:349px;
float:left;
}
..padding {
padding-left: 40px;
text-align:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left_column">
<div class="padding">
left column
</div>
</div>
<div id="right_column">
<div class="padding">
right column
</div>
</div>
</div>
</body>
</html>
--
Tomasz Chmielewski
http://wpkg.org
